<script setup>
import { reactive, ref } from "vue";
import requests from "../../../utils/requests.js";

// 数据初始化
const data = reactive({
  pageData: {
    pageSize: 10, // 每页显示的数据条数
    pageNum: 1,   // 当前页码
    total: 0,     // 总数据条数
  },
  tableData: [], // 表格数据
  searchForm: {
    activityName: "", // 查询条件：活动名称
    userName: "",     // 查询条件：创建人姓名
  },
});

// 弹窗状态控制
const dialogVisible = ref(false); // 控制新建活动弹窗的显示与隐藏

// 表单数据模型
const form = reactive({
  activityName: "",  // 活动名称
  startTime: null,   // 开始时间
  endTime: null,     // 结束时间
  location: "",      // 地点
  allowSelfEnroll: "Yes", // 是否允许报名，默认值为 "Yes"
});

// 表单校验规则
const rules = {
  activityName: [
    { required: true, message: "请输入活动名称", trigger: "blur" }, // 必填校验
  ],
  startTime: [
    { required: true, message: "请选择开始时间", trigger: "change" }, // 必填校验
  ],
  endTime: [
    { required: true, message: "请选择结束时间", trigger: "change" }, // 必填校验
  ],
  location: [
    { required: true, message: "请输入地点", trigger: "blur" }, // 必填校验
  ],
  allowSelfEnroll: [
    { required: true, message: "请选择是否允许报名", trigger: "change" }, // 必填校验
  ],
};

// 表单引用（用于调用表单方法）
const formRef = ref(null);

/**
 * 获取地点信息
 * @returns {Promise<Object>} 返回地点 ID 到地址的映射
 */
const getLocations = () => {
  return requests.post("/location/page", {
    pageNum: data.pageData.pageNum,
    pageSize: data.pageData.pageSize,
  }).then((res) => {
    const locationMap = {}; // 构建地点 ID 到地址的映射
    res.data.list.forEach(item => {
      locationMap[item.id] = item.address;
    });
    return locationMap;
  }).catch((err) => {
    console.error("获取地址失败：", err);
    return {};
  });
};

/**
 * 获取用户姓名
 * @returns {Promise<Object>} 返回活动 ID 到用户名的映射
 */
const getUserNames = () => {
  return requests.post("/vwUserActivityDetails/page", {
    pageNum: data.pageData.pageNum,
    pageSize: data.pageData.pageSize,
  }).then((res) => {
    const userNameMap = {}; // 构建活动 ID 到用户名的映射
    res.data.list.forEach(item => {
      userNameMap[item.activityId] = item.userName;
    });
    return userNameMap;
  }).catch((err) => {
    console.error("用户姓名加载失败：", err);
    return {};
  });
};

/**
 * 获取表格数据
 * 获取活动数据，并并行加载用户姓名和地点信息
 */
const getTableData = () => {
  requests.post("/location/page", {
    pageNum: data.pageData.pageNum,
    pageSize: data.pageData.pageSize,
  })
      .then((res) => {
        data.tableData = res.data.list; // 更新表格数据
        data.pageData.total = res.data.total; // 更新总数据条数

        // 并行加载用户姓名和地点信息
        return Promise.all([getUserNames(), getLocations()]);
      })
      .then(([userNames, locations]) => {
        // 将用户姓名和地点信息合并到表格数据中
        data.tableData = data.tableData.map(activity => ({
          ...activity,
          username: userNames[activity.id] || "未知用户", // 如果没有匹配的用户名，显示 "未知用户"
          location: locations[activity.locationId] || "未知地点", // 如果没有匹配的地点，显示 "未知地点"
        }));
      })
      .catch((err) => {
        console.error("数据加载失败：", err);
      });
};

/**
 * 查询操作
 * 根据查询条件重新加载表格数据
 */
const handleSearch = () => {
  data.pageData.pageNum = 1; // 重置页码为第一页
  getTableData(); // 重新加载数据
};

/**
 * 打开弹窗
 * 显示新建活动的弹窗
 */
const openDialog = () => {
  dialogVisible.value = true; // 设置弹窗可见
};

/**
 * 关闭弹窗
 * 隐藏新建活动的弹窗，并重置表单
 */
const closeDialog = () => {
  dialogVisible.value = false; // 设置弹窗不可见
  formRef.value.resetFields(); // 重置表单字段
};

/**
 * 提交表单
 * 校验表单数据后提交到服务器
 */
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 表单校验通过，提交表单数据
      requests.post("/activity", form)
          .then(() => {
            closeDialog(); // 关闭弹窗
            getTableData(); // 刷新表格数据
          })
          .catch((err) => {
            console.error("提交失败：", err);
          });
    }
  });
};

/**
 * 编辑活动
 * 处理编辑活动的操作（目前仅打印日志）
 * @param {Object} row 活动数据
 */
const handleEdit = (row) => {
  console.log("编辑活动：", row); // 打印编辑的活动数据
};

/**
 * 删除活动
 * 处理删除活动的操作（目前仅打印日志）
 * @param {string} id 活动 ID
 */
const handleDelete = (id) => {
  // 后续完善
  console.log("删除活动 ID：", id); // 打印删除的活动 ID
};

// 初始加载数据
getTableData();
</script>

<template>
  <el-card>
    <!-- 表格 -->
    <el-table :data="data.tableData" border style="width: 100%">
      <el-table-column prop="id" label="序号" width="55px"></el-table-column> <!-- 序号列 -->
      <el-table-column prop="address" label="地址" ></el-table-column> <!-- 序号列 -->
      <el-table-column label="启用状态" prop="status" width="90px">
        <template #default="scope">
          <!-- 根据状态显示启用或禁用标签 -->
          <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
            {{ scope.row.status === 'active' ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="allowSelfEnroll" label="是否自主参加">
        <template #default="scope">
          <!-- 根据是否允许报名显示是或否标签 -->
          <el-tag :type="scope.row.allowSelfEnroll === 'Yes' ? 'success' : 'danger'">
            {{ scope.row.allowSelfEnroll === 'Yes' ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150px">
        <template #default="scope">
          <!-- 编辑和删除按钮 -->
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新建活动弹窗 -->
  </el-card>
</template>

<style scoped lang="scss">
$add-component-height: 35px;

.el-card {
  margin: 20px;

  ::v-deep(.el-table .cell) {
    text-align: center; // 表格内容居中对齐
  }

  ::v-deep(.el-table th .cell) {
    text-align: center; // 表头内容居中对齐
  }
}

.add-button {
  width: 120px;
  height: $add-component-height; // 查询按钮高度
}

.add-input {
  width: 255px;
  height: $add-component-height; // 输入框高度
  float: right; // 输入框靠右对齐
}
</style>